<template>
  <el-container class="topContainer">
    <div class="head_box add_btn_top">
      <el-menu
        :default-active="$route.path"
        active-text-color="#ffd04b"
        mode="horizontal"
        router
      >
        <el-submenu index="1">
          <template slot="title"
            ><i class="el-icon-document" style="font-size: 14px"></i
            ><span class="submenu_title"> 文件</span></template
          >
          <el-menu-item @click="addTab">新建</el-menu-item>
          <!--<el-menu-item index="/monitor/bbb">新建ETL流程</el-menu-item>-->
          <el-menu-item>打开文件</el-menu-item>
          <el-menu-item>导入样例</el-menu-item>
          <el-menu-item>导入机器模型</el-menu-item>
          <el-menu-item @click="save">保存</el-menu-item>
          <el-menu-item>导入文件</el-menu-item>
          <el-menu-item @click="handleDownload">下载文件</el-menu-item>
          <el-menu-item>关闭文件</el-menu-item>
          <el-menu-item>关闭所有文件</el-menu-item>
          <el-menu-item>删除文件</el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title"
            ><i class="el-icon-edit-outline" style="font-size: 14px"></i>
            <span class="submenu_title"> 编辑</span>
          </template>
          <el-menu-item index="/cdn/aaa">撤销编辑</el-menu-item>
          <el-menu-item index="/cdn/bbb">查找</el-menu-item>
          <el-menu-item index="/cdn/ccc">查找并替换</el-menu-item>
          <el-menu-item index="/cdn/ddd">格式化代码</el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title"
            ><i class="el-icon-setting" style="font-size: 14px"></i>
            <span class="submenu_title"> 操作</span>
          </template>

          <el-menu-item @click="handleToggleWorkspace"
            ><svg-icon
              icon-class="workingspace"
              class="operationIcon"
            />工作空间</el-menu-item
          >
          <el-menu-item @click="handleToggleExtend"
            ><svg-icon
              icon-class="extend"
              class="operationIcon"
            />扩展</el-menu-item
          >
          <el-menu-item @click="handleToggleSimulator"
            ><svg-icon
              icon-class="simulator"
              class="operationIcon"
            />模拟器</el-menu-item
          >
          <el-menu-item @click="openConsole"
            ><svg-icon
              icon-class="console"
              class="operationIcon"
            />控制台</el-menu-item
          >
          <el-menu-item @click="handleToggleDeploy"
            ><svg-icon
              icon-class="deploy"
              class="operationIcon"
            />部署</el-menu-item
          >
          <el-divider class="divider"></el-divider>
          <el-menu-item @click="handleExport"
            ><svg-icon
              icon-class="exportcontent"
              style="margin: 0 3px 0 5px"
            />导出</el-menu-item
          >
        </el-submenu>
      </el-menu>

      <!-- 中间图表部分 -->
      <div class="icon_box">
        <img
          @click="addTab"
          src="@/assets/edgeImg/plus-add.png"
          class="operation_icon"
          alt="新建"
        />
        <!-- v-if="activeTab.isPlay == false" -->
        <!-- {{ activeTab }} -->
        <img
          v-if="
            tabsList.length == 0 ||
              activeTab.isPlay === null ||
              activeTab.isPlay === false
          "
          @click="runApp"
          src="@/assets/edgeImg/play-circle.png"
          class="operation_icon"
          alt="运行"
        />
        <img
          v-else
          @click="runApp"
          src="@/assets/edgeImg/bofang.png"
          class="operation_icon"
          alt="运行"
        />
        <img
          v-if="
            tabsList.length == 0 ||
              activeTab.isPlay === null ||
              activeTab.isPlay == true
          "
          @click="stopApp"
          src="@/assets/edgeImg/timeOut.png"
          class="operation_icon"
          alt="停止"
        />
        <img
          v-else
          @click="stopApp"
          src="@/assets/edgeImg/zanting.png"
          class="operation_icon"
          alt="停止"
        />
        <img
          @click="save"
          src="@/assets/edgeImg/save.png"
          class="operation_icon"
          style="width: 15px"
          alt="保存"
        />
        <!-- <i class="el-icon-upload2" title="部署" style="font-size: 20px"></i> -->
        <img
          style="width: 15px"
          src="@/assets/edgeImg/upload.png"
          class="operation_icon"
          alt="部署"
        />
      </div>
      <el-switch
        v-model="displayMenu"
        inactive-text="显示菜单"
        :change="showMenu()"
      />
    </div>

    <el-container class="mainContainer" direction="horizontal">
      <!-- 工作空间 -->
      <el-aside
        class="my_as"
        width="22%"
        v-show="asideLeftShow"
        style="margin-right: 10px"
      >
        <!-- <shrink-view v-model="open"> -->

        <el-tabs v-model="showActive" @tab-click="changeMenu">
          <el-tab-pane name="first">
            <span slot="label">
              <svg-icon
                icon-class="workingspace-active"
                v-if="showActive == 'first'"
              />
              <svg-icon icon-class="workingspace" v-else />
            </span>
            <!-- <span slot="label"><i class="el-icon-date"></i> </span> -->
            <div v-if="workspaceShow">
              <workspaces
                @createrFile="addTab"
                @closeFile="removeTab"
                @save="save"
                :browerHeight="browerHeight"
                @openTab_File="openTab_File"
                @deleteSiddi="deleteSiddi"
              ></workspaces>
            </div>
          </el-tab-pane>

          <el-tab-pane name="second">
            <span slot="label">
              <svg-icon
                icon-class="extend-active"
                v-if="showActive == 'second'"
              />
              <svg-icon icon-class="extend" v-else />
            </span>
            扩展
          </el-tab-pane>

          <el-tab-pane name="third">
            <span slot="label">
              <svg-icon
                icon-class="simulator-active"
                v-if="showActive == 'third'"
              />
              <svg-icon icon-class="simulator" v-else />
            </span>
            <div>
              <Simulator></Simulator>
            </div>
          </el-tab-pane>

          <el-tab-pane name="fourth">
            <span slot="label">
              <svg-icon
                icon-class="console-active"
                v-if="showActive == 'fourth'"
              />
              <svg-icon icon-class="console" v-else />
            </span>
            控制台
          </el-tab-pane>

          <el-tab-pane name="fifth">
            <span slot="label">
              <svg-icon
                icon-class="deploy-active"
                v-if="showActive == 'fifth'"
              />
              <svg-icon icon-class="deploy" v-else />
            </span>
            部署
          </el-tab-pane>
        </el-tabs>
        <!-- 关闭按钮 -->
        <svg-icon @click="closeTabs" class="close-icon" icon-class="close" />
        <!-- </shrink-view> -->
      </el-aside>

      <!-- 内容区域 -->
      <el-main style="padding: 0 0 0 0" class="my_manin" v-init-screen-h="10">
        <!-- <el-card :style="{ height: browerHeight + 2 + 'px' }" class="main_card"> -->
        <el-card :style="{ height: browerHeight + 2 + 'px' }" class="main_card">
          <el-tabs
            v-model="editableTabsValue"
            @tab-remove="removeTab"
            @tab-click="changeTab"
          >
            <!-- {{ item.component }} -->
            <el-tab-pane
              v-for="(item, index) in tabsList"
              :key="item.id"
              :label="item.name"
              :name="item.name"
              :closable="item.closable"
            >
              <span slot="label" class="tab_lab">
                <span>{{ item.name }}</span>
                <!-- {{ item.isSave }} -->
                <!-- 是否保存的指示点 -->
                <div class="dot" v-if="item.isSave === true"></div>
              </span>
              <component
                :save="save"
                @codeSubmit="codeSubmit"
                @deleteCells="
                  (row, xml) => {
                    deleteCells(row, xml, item, index);
                  }
                "
                ref="mxRefs"
                :is="item.component"
                :key="item.id"
                :mxTitle="mxTitle"
                :objectJson="item.siddhiJson"
                :codeText="item.options.file ? item.options.file.content : ''"
                :objectMxl="item.mxJson"
                :objectState="item.state"
                @delTab="delTabs"
                :viewHeight="viewHeight"
                :viewWidth="viewWidth"
                @openRightDrawer="openRightDrawer"
                :appData="item.appData"
                @switchToView="switchToView"
              ></component>
              <!--
           :closable='item.closable' ----通过closable来判断当前tabs是否可以关闭
           component：通过使用component元素，在根据组件中的is属性来动态的切换不同的组件。
           :is='item.content'：这是动态绑定的组件
           :objId='objId'  ----这个是组件之间的传值，父组件传值给子组件的
           @fatherEvent="btnclick" ----这是子组件对父组件的操作
           @delTab='delTabs' ----这是子组件对父组件的操作
           appData ：作用/通过mxGraph中节点的操作，获取target和source节点信息
           -->
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <el-button
          v-show="closeBtnShow"
          @click="closeAllTab"
          size="mini"
          style="
            position: absolute;
            right: 10px;
            height: 28px;
            background-color: #e9e9e9;
            top: 6px;
          "
          >关闭全部</el-button
        >
        <!-- :width="consoleWidth" -->

        <drawerBottom
          :websock="websock"
          title="控制台"
          :display.sync="displayConsole"
          :wShow="asideLeftShow"
          :height="drawerBtttomHeight"
        >
          <div
            class="output-console-content"
            v-for="(item, index) in logData"
            :key="index"
          >
            <p :class="item.type" v-html="item.message"></p>
          </div>
        </drawerBottom>
      </el-main>
    </el-container>

    <drawer :title="configTiltle" :display.sync="display">
      <div v-if="nodeType == 0">
        <!--设置appSetting-->
        <app-Setting
          :key="cmpKey"
          :display="display"
          :nodeDataRight="nodeDataRight"
          @closeSetting="closeSetting"
        ></app-Setting>
      </div>
      <!--   :key="cmpKey"添加key解决组件无法重置表单问题 -->
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.sourceList">
        <!--输入源配置-->
        <input-Source
          :key="cmpKey"
          :display="display"
          @handClose="closeSetting"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
        ></input-Source>
      </div>
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.sinkList">
        <!--输出源配置-->
        <output-Sink
          :key="cmpKey"
          :display="display"
          @handClose="closeSetting"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
        ></output-Sink>
      </div>
      <!--传送流配置-->
      <stream
        :key="cmpKey"
        :display="display"
        ref="stream"
        v-if="nodeType == nodeTypeConstants.TYPE.streamList"
        :nodeDataRight="nodeDataRight"
        :keyNumber="keyNumber"
        @returnSource="returnSource"
        @handClose="closeSetting"
      ></stream>
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.triggerList">
        <!--触发器配置-->
        <trigger
          :key="cmpKey"
          :display="display"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
          @handClose="closeSetting"
        ></trigger>
      </div>
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.partitionList">
        <!--分区配置-->
        <partition :key="cmpKey" :display="display"></partition>
      </div>
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.tableList">
        <!--表格配置-->
        <tables
          :key="cmpKey"
          :display="display"
          @handClose="closeSetting"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
        ></tables>
      </div>
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.windowList">
        <!--视窗配置-->
        <Windows
          :key="cmpKey"
          :display="display"
          @handClose="closeSetting"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
        ></Windows>
      </div>
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.aggregationList">
        <!--聚合配置-->
        <aggregation
          :key="cmpKey"
          :display="display"
          @handClose="closeSetting"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
        ></aggregation>
      </div>
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.queryprojection">
        <!--/投影配置 过滤配置 查询窗口配置 同一个组件入口 -->
        <projection
          :key="cmpKey"
          :display="display"
          @handClose="closeSetting"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
        ></projection>
      </div>

      <!--<div v-else-if="nodeType == nodeTypeConstants.TYPE.functionList">-->
      <!--&lt;!&ndash;查询函数配置&ndash;&gt;-->
      <!--<functionQuery></functionQuery>-->
      <!--</div>-->
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.queryJoin">
        <!--连接配置-->
        <Join
          :key="cmpKey"
          :display="display"
          @handClose="closeSetting"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
        ></Join>
      </div>
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.queryPattern">
        <!--模式配置-->
        <Patterns
          :key="cmpKey"
          :display="display"
          type="PATTERN"
          @handClose="closeSetting"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
        ></Patterns>
      </div>
      <div v-else-if="nodeType == nodeTypeConstants.TYPE.querySequence">
        <!--序列配置-->
        <!-- <sequence></sequence> -->
        <Patterns
          :key="cmpKey"
          :display="display"
          :type="'SEQUENCE'"
          @handClose="closeSetting"
          :nodeDataRight="nodeDataRight"
          :keyNumber="keyNumber"
          @returnSource="returnSource"
        ></Patterns>
      </div>
      <!-- v-else-if -->
      <div v-if="nodeType == nodeTypeConstants.TYPE.functionList">
        <!--函数配置-->
        <customFunction
          :key="cmpKey"
          :display="display"
          :nodeDataRight="nodeDataRight"
          @returnSource="returnSource"
          @handClose="closeSetting"
        ></customFunction>
      </div>
      <!-- </div> -->
    </drawer>
    <!-- 站点添加弹窗 -->
    <el-dialog
      :visible.sync="saveDialog"
      v-dialogDrag
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <div slot="title" class="dialog-title">
        <i class="el-icon-edit-outline"></i>
        <span class="title-text">保存到工作空间</span>
      </div>
      <save-file-dialog @closaddsite="closedialog"></save-file-dialog>
    </el-dialog>
    <Deploy :deployShow.sync="deployShow"></Deploy>
    <ExpordSiddhi :expordShow.sync="expordShow"></ExpordSiddhi>
  </el-container>
</template>

<script>
import drawerBottom from "./drawerBottom";
import store from "@/store";
import { mapGetters } from "vuex";
import graph from "@/components/mxgraph/graphLayout.vue";
import drawer from "./drawerRight";
import codeEditor from "@/components/Aceeditor/CodeEditor.vue";
import appSetting from "./appConfig";
import inputSource from "./inputSourcePage/inputSource";
import stream from "./Stream/index.vue";
import outputSink from "./inputSourcePage/outputSink";
import trigger from "./Trigger/index.vue";
import partition from "./partition";
import tables from "./TablesPage/tables";
import customFunction from "./CustomFunction/index.vue";
import Join from "./join/join.vue";
import projection from "./projectionPage/projection";
import Patterns from "./pattern/index.vue";
import Windows from "./windowsPage/index";
import aggregation from "./aggregationPage/aggregation";
import workspaces from "./workspace/workspaces";
import Simulator from "./Simulator/index";
import saveFileDialog from "./dialog/saveFileDialog";
import {
  edgeWrite,
  edgeGetCode,
  edgeExistFile,
  deleteSiddi,
  getFeed
} from "@/api/siddhi";
import { base64EncodeUnicode, base64DecodeUnicode } from "@/utils/utils";
import AppData from "@/editor/js/design-view/configuration-data/app-data";
import ConfigurationData from "@/editor/js/design-view/configuration-data/configuration-data";
import { constants } from "../../components/mxgraph/common/constants";
import Application from "@/editor/application";
import app from "@/store/modules/app";
import { parse } from "path-to-regexp";
import WebSocketClass from "@/utils/WebSocketClass";
import Deploy from "./Deploy/index.vue";
import { generateId } from "@/utils";
import ExpordSiddhi from "./ExportSiddhi";
import { streamKey } from "@/utils/local";
import { isArray } from "minio/dist/main/helpers";
import { download } from "@/utils/download";
import { getSourcesinkzh } from "@/api/project";
export default {
  components: {
    Simulator,
    ExpordSiddhi,
    Deploy,
    drawer,
    drawerBottom,
    graph,
    codeEditor,
    appSetting,
    inputSource,
    stream,
    outputSink,
    trigger,
    partition,
    tables,
    customFunction,
    Join,
    projection,
    Patterns,
    Windows,
    aggregation,
    workspaces,
    saveFileDialog
  },
  data() {
    return {
      confirmText: "是否确认删除?",
      cmpKey: generateId(),
      app2: this.$store.getters.app,
      deployShow: false,
      websock: null,
      mxTitle: "",
      closeBtnShow: false,
      showActive: "first",
      displayMenu: true,
      saveDialog: false,
      browerHeight: document.body.clientHeight - 120,
      viewHeight: document.body.clientHeight - 160 + "",
      viewWidth: document.body.clientWidth + "",
      open: true,
      display: false,
      // displayConsole: false,
      drawerBtttomWidth: "100%",
      drawerBtttomHeight: "150px",
      drawerWidth: "548px",
      //editableTabsValue: '',
      //ediEdgeTabs: [],
      tabIndex: 0, // tab目前显示数
      //动态子组件
      objId: "",
      asideLeftShow: false,
      workspaceShow: false,
      simulatorShow: false,
      configTiltle: "",
      nodeType: "",
      nodeTypeConstants: constants,
      editorContent: "",
      mxgraphContent: "",
      mxgraphView: "",
      openFileName: "",
      openFileAllName: "",
      objectJson: "",
      objectMxl: "",
      tabList: [],
      appData: new AppData(),
      configurationData: new ConfigurationData(),
      nodeDataRight: {},
      editorFlag: false,
      returnNodeDataRight: {},
      siddhiDesc: "Description of the plan",
      siddhiSuffixes: ".siddhi",
      //activeTab:null,////默认显示的tab
      defaultName: "avic-iot",
      saveResultJson: "",
      app: {},
      expordShow: false
    };
  },
  computed: {
    ...mapGetters([
      "drawerShow",
      "sidebar",
      "appConfig",
      "ediEdgeTabs",
      "activeTab",
      "logEdgeData",
      "logConsoleState"
    ]),
    sidebarOpened() {
      return this.sidebar.opened;
    },
    displayConsole() {
      return this.logConsoleState;
    },
    logData() {
      // console.info(JSON.stringify(this.logEdgeData));
      return this.logEdgeData;
    },
    siddhiName() {
      return this.appConfig.name;
    },
    siddhiIsDirty() {
      return this.appConfig.isDirty;
    },
    tabsList() {
      console.log("this.ediEdgeTabs :>> ", this.ediEdgeTabs);
      return this.ediEdgeTabs;
    },
    editableTabsValue: {
      get: function() {
        return this.activeTab.name;
      },
      set: function(newValue) {}
    },
    keyNumber: {
      get() {
        return Math.random();
      },
      set(val) {
        return Math.random();
      }
    },
    consoleWidth() {
      if (this.sidebarOpened) {
        if (this.displayMenu) {
          this.viewWidth = document.body.clientWidth - 185 + "";
          return this.viewWidth;
        } else {
          this.viewWidth = document.body.clientWidth - 160 + "";
          return this.viewWidth;
        }
      } else {
        if (this.displayMenu) {
          this.viewWidth = document.body.clientWidth + "";
          return this.viewWidth;
        } else {
          this.viewWidth = document.body.clientWidth + 15 + "";
          return this.viewWidth;
        }
      }
    }
  },
  watch: {
    configurationData(value) {
      //监听每个节点的数据返回值，进行数据的组装
    },
    objectJson(value) {
      //监听每个节点的数据返回值，进行数据的组装
    },
    display(value) {
      this.keyNumber++;
    },
    activeTab: {
      handler: function(newData, oldData) {
        this.editableTabsValue = newData;
      },
      immediate: true,
      deep: true
    },
    tabsList: {
      handler: function(newData, oldData) {
        // console.info("已经打开的页签如下：");
        // console.log(newData);
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    // console.info("大图中：" + Math.random().toString(36));
    // console.info(
    //   "layout :初始状态：" +
    //     this.sidebarOpened +
    //     "|clientWidth:" +
    //     document.body.clientWidth
    // );
    // console.info("layout :初始高度：" + this.browerHeight);
    this.initClientWidth();
    window.onresize = () => {
      return (() => {
        this.viewWidth = document.body.clientWidth + "";
        this.viewHeight = document.body.clientHeight - 160 + "";
        this.browerHeight = document.body.clientHeight - 120;
      })();
    };
    // console.info("viewWidth :" + this.viewWidth);
    this.app = new Application();
    this.app.render();
    this.$store.dispatch("siddhi/loadWorkspaceTree");
  },
  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
  },
  async created() {
    // 当前不存在zh数据去拿
    if (!localStorage.getItem("sourceSinkData")) {
      getSourcesinkzh().then(data => {
        localStorage.setItem("sourceSinkData", JSON.stringify(data.data.data));
      });
    }
    // this.initWebSocket();
    this.websock = new WebSocketClass(
      "ws://" + location.host + process.env.VUE_APP_SIDDHI_WS_API + "/console",
      0,
      msg => {
        store.dispatch("siddhi/setLogData", msg);
        this.scrollToBottom();
        // this.messageList.push(msg);
      }
    );
    // 获取metadata数据
    this.$store.dispatch("projection/getMetadata");
    this.$store.dispatch("projection/getSuccSin");
    this.$store.dispatch("siddhi/getListSiddhi");
  },
  methods: {
    // 下载文件
    handleDownload() {
      if (this.tabsList.length) {
        download(
          "http://223.223.176.32:30711/iot/default/area/SiddhiApp.siddhi",
          "测试"
        );
      } else {
        this.$msg("请打开siddhi程序");
      }
    },
    changeMenu(tab, event) {
      if (this.showActive == "fourth") {
        this.deployShow = true;
      }
    },
    // 导出
    handleExport() {
      this.expordShow = true;
    },
    closeDrawer() {
      // returnSource
      // stream
      // this.returnSource = {};
      // this.$forceUpdate();
      // Object.assign(this.$refs.stream.$data, this.$refs.stream.$options.data());
    },
    scrollToBottom() {
      this.$nextTick(() => {
        var div = document.getElementById("dataList");
        div.scrollTop = div.scrollHeight;
      });
    },
    // 删除节点
    deleteCells(row, xml, item) {
      let { id, type } = row && row[0];
      this.$store.commit("siddhi/REM_ACTIVE_TAB", { type, id });
      return;
      type = type.split(".");
      const { appData, siddhiJson } = item;
      if (siddhiJson) {
        const newSiddhiJson = JSON.parse(base64DecodeUnicode(siddhiJson));
        if (type.indexOf(".") != -1) {
          if (appData[type[0]][type[1]]) {
            newSiddhiJson.siddhiAppConfig[type[0]][type[1]].forEach(
              (ele, i) => {
                if (ele.id == id) {
                  newSiddhiJson.siddhiAppConfig[type[0]][type[1]].splice(i, 1);
                }
              }
            );
            appData[type[0]][type[1]].forEach((ele, i) => {
              if (ele.id == id) {
                appData[type[0]][type[1]].splice(i, 1);
              }
            });
            this.reloadAppData(appData);
            item.siddhiJson = base64EncodeUnicode(
              JSON.stringify(newSiddhiJson)
            );
            // item.appData =appData
            // 更新tab下的数据
            store.commit("siddhi/SET_ACTIVE_TAB", item);
            if (this.objectJson) {
              let objectJson = base64DecodeUnicode(this.objectJson);
              objectJson = JSON.parse(objectJson);
              objectJson.siddhiAppConfig[type[0]][type[1]] =
                appData[type[0]][type[1]];
              this.$set(item, "mxJson", xml);
              objectJson = base64EncodeUnicode(JSON.stringify(objectJson));
              this.$store.commit("siddhi/SET_ACTIVE_TAB", {
                ...this.activeTab,
                siddhiJson: objectJson
              });
              // this.activeTab.siddhiJson = base64EncodeUnicode(
              //   JSON.stringify(objectJson)
              // );
              this.saveResultJson = base64EncodeUnicode(
                JSON.stringify(objectJson)
              );
            }
          }
        } else {
          if (appData[type]) {
            newSiddhiJson.siddhiAppConfig[type].forEach((ele, i) => {
              if (ele.id == id) {
                newSiddhiJson.siddhiAppConfig[type].splice(i, 1);
              }
            });
            appData[type].forEach((ele, i) => {
              if (ele.id == id) {
                appData[type].splice(i, 1);
              }
            });
            this.reloadAppData(appData);
            item.siddhiJson = base64EncodeUnicode(
              JSON.stringify(newSiddhiJson)
            );
            // item.appData =appData
            // 更新tab下的数据
            store.commit("siddhi/SET_ACTIVE_TAB", item);
            if (this.objectJson) {
              let objectJson = base64DecodeUnicode(this.objectJson);
              objectJson = JSON.parse(objectJson);
              objectJson.siddhiAppConfig[type] = appData[type];
              this.$set(item, "mxJson", xml);
              objectJson = base64EncodeUnicode(JSON.stringify(objectJson));
              this.$store.commit("siddhi/SET_ACTIVE_TAB", {
                ...this.activeTab,
                siddhiJson: objectJson
              });
              // this.activeTab.siddhiJson = base64EncodeUnicode(
              //   JSON.stringify(objectJson)
              // );
              this.saveResultJson = base64EncodeUnicode(
                JSON.stringify(objectJson)
              );
            }
          }
        }
      }
    },
    closeAllTab(targetName) {
      // this.app.workspaceManager.closeAllTabs(this.app);
      const isServe = this.$store.getters["siddhi/getIsServe"];
      if (isServe) {
        this.$confirm(
          "文件包含更改内容，是否要关闭它们 ? 如果关闭所有未保存的文件，你的更改内容将会丢失",
          "提示",
          {
            confirmButtonText: "关闭",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.$store.commit("siddhi/REMOVE_ALLTAB");
            this.$store.commit("siddhi/REMOVE_ACTIVE_TAB");
            this.closeBtnShow = false;
          })
          .catch(() => {
            this.$msg({
              type: "info",
              message: "已取消"
            });
          });
      } else {
        this.$store.commit("siddhi/REMOVE_ALLTAB");
        this.$store.commit("siddhi/REMOVE_ACTIVE_TAB");
        this.closeBtnShow = false;
      }
    },
    initClientWidth() {
      if (this.sidebarOpened) {
        this.viewWidth = document.body.clientWidth - 180 + "";
      } else {
        this.viewWidth = document.body.clientWidth + 10 + "";
      }
    },
    // 工作空间
    handleToggleWorkspace() {
      this.showActive = "first";
      if (!this.displayMenu) {
        this.displayMenu = true;
      }
      // this.displayMenu == true
      // this.showMenu()
    },
    // 扩展
    handleToggleExtend() {
      if (!this.displayMenu) {
        this.displayMenu = true;
      }
      this.showActive = "second";
      this.displayMenu == true;
    },
    // 模拟器
    handleToggleSimulator() {
      // if (this.asideLeftShow == false) {
      //   this.asideLeftShow = !this.asideLeftShow;
      // }
      // this.workspaceShow = false;
      // this.simulatorShow = true;
      this.showActive = "third";
    },
    // 控制台
    handleToggleConsole() {
      this.showActive = "fourth";
    },
    // 部署
    handleToggleDeploy() {
      this.deployShow = true;
      this.showActive = "fifth";
    },
    // 显示菜单
    showMenu() {
      if (this.displayMenu == true) {
        if (this.asideLeftShow == false) {
          this.asideLeftShow = true;
          this.simulatorShow = false;
          this.workspaceShow = true;
        }
      }
      if (this.displayMenu == false) {
        if (this.asideLeftShow == true) {
          this.asideLeftShow = false;
          this.simulatorShow = false;
          this.workspaceShow = false;
        }
      }
    },
    // 关闭tabs
    closeTabs() {
      this.displayMenu = false;
    },
    openConsole() {
      if (!this.displayConsole) {
        store.dispatch("siddhi/setConsoleState", true);
      } else {
        store.dispatch("siddhi/setConsoleState", false);
      }
    },
    valdataDrawer(sourceCell, targetCell, relateCellData, type) {
      // const isName = ["streamList", "aggregationList", "sourceList"];
      const dowName = ["sourceList", "queryLists.PATTERN"];
      if (Array.isArray(sourceCell)) {
        if (
          this.nodeType === "queryLists.JOIN" &&
          !Array.isArray(sourceCell) &&
          sourceCell.length !== 2
        ) {
          this.$msg("[连接]必须有两个输入节点");
          return false;
        }

        const isname = sourceCell.some(item => !item.name || item.name == "");
        if (isname) {
          this.$msg("上一个节点名称不能为空,请补全信息");
          return false;
        }
      } else {
        if (sourceCell && !streamKey.includes(type) && !sourceCell.name) {
          this.$msg("上一个节点名称不能为空,请补全信息");
          return false;
        }
      }

      // 投射节点验证-上下节点是否有名称
      // if (
      //   that.nodeType == "queryLists.WINDOW_FILTER_PROJECTION" ||
      //   this.nodeType === "sourceList"
      // ) {
      // 取上下节点信息
      if (!relateCellData) {
        this.$msg("上下节点信息不完整,请补全信息");
        return false;
      }
      if (
        dowName.includes(this.nodeType) &&
        (!targetCell || JSON.stringify(targetCell) == "{}" || !targetCell.name)
      ) {
        this.$msg("请连接下一个节点,并补全信息!");
        return false;
      }

      if (targetCell && !targetCell.name && !streamKey.includes(type)) {
        this.$msg("下一个节点名称不能为空,请补全信息");
        return false;
      }
      return true;
    },
    // 节点双击
    openRightDrawer(param) {
      console.log(param, "ediEdgeTabsediEdgeTabsediEdgeTabs");
      this.cmpKey = generateId();
      let that = this;
      that.nodeType = param.nodeType;
      const { relateCellData, mxNode } = param;
      const { sourceCell, targetCell } = relateCellData;
      // 检验
      if (
        !this.valdataDrawer(
          sourceCell,
          targetCell,
          relateCellData,
          that.nodeType
        )
      ) {
        return;
      }
      that.nodeDataRight = {
        ...param,
        ...mxNode,
        relateData: param.relateCellData
      };
      console.info("打开节点类型 ：", param, that.nodeDataRight);
      //动态修改抽屉标题
      that.configTiltle =
        constants.configTiltle.find(item => item.type == param.nodeType)
          ?.title + "配置" || "配置";
      that.nodeId = param.id;
      //  在节点操作后，时时更新 当前页签对象中的 整体xml信息
      this.$store.commit("siddhi/SET_ACTIVE_TAB", {
        ...this.activeTab,
        mxJson: param.mxJson
      });
      that.display = true;
      return;
      if (that.nodeType != "0") {
        if (param.objectState == "new") {
          that.appData = that.activeTab.appData;
          let keyType = that.nodeType;
          let nodeData = [];
          if (that.nodeType.indexOf("queryLists.") != -1) {
            keyType = that.nodeType.substring(
              that.nodeType.lastIndexOf(".") + 1
            );
            nodeData = that.appData.getNodeData(keyType);
          } else {
            nodeData = that.appData.getNodeDataOther(that.nodeType);
          }

          if (nodeData.length > 0) {
            let existNode = nodeData.some((item, index, arr) => {
              if (item.id == that.nodeId) {
                item.relateData = param.relateCellData;
                that.nodeDataRight = _.cloneDeep(item);
                return true;
              }
            });
            if (!existNode) {
              //新增 一个节点时  判断是否已经存在同类型的节点,不存在则初始化一个新的
              that.nodeDataRight = { id: that.nodeId };
            }
          } else {
            that.nodeDataRight = {
              id: that.nodeId,
              relateData: JSON.parse(JSON.stringify(param.relateCellData))
            };
          }
          Object.assign(that.nodeDataRight, { objectState: "new" });
          that.objectJson = that.activeTab.siddhiJson;
          // console.info(JSON.parse(base64DecodeUnicode(that.objectJson)));
        } else {
          //old 工作空间打开
          that.objectJson = that.activeTab.siddhiJson; //工作空间打开后获取当前siddhi的json格式，save时不能为空
          that.nodeDataRight = param.mxNode || {}; //打开抽屉后，传入节点信息
          Object.assign(that.nodeDataRight, {
            relateData: param.relateCellData
          }); //时时更新最新的节点前后关联数据
          Object.assign(that.nodeDataRight, { objectState: "old" }); //页签状态，在右侧抽屉中返回时使用returnSource
        }

        if (
          that.nodeDataRight == undefined ||
          that.nodeDataRight.relateData == undefined
        ) {
          if (param.relateCellData == undefined) {
            that.nodeDataRight = {};
            Object.assign(that.nodeDataRight, { relateData: {} });
          } else {
            Object.assign(that.nodeDataRight, {
              relateData: JSON.parse(JSON.stringify(param.relateCellData))
            });
          }
        } else {
          that.nodeDataRight.relateData ==
            {
              targetCell: param.relateCellData.targetCell,
              sourceCell: param.relateCellData.sourceCell
            };
        }
      } else {
        //appConfig.vue中修改名称后
        //that.nodeDataRight.objectMxl=param.mxJson
        that.nodeDataRight.objectJson = that.objectJson;
      }

      // console.info("----执行 打开------------");
      // console.info(that.nodeDataRight);
      // console.info("----打开抽屉------------");
    },
    addTab(targetName, name, title) {
      //----------------这是添加tabs页的方法，三个值对应着上面点击方法传过来的，但是也不是三个都要，第一个值是必须要传的
      if (this.ediEdgeTabs.length === 0) {
        this.tabIndex = 0;
      }
      let newTabName = "未命名" + this.tabIndex;
      const isIndex = this.ediEdgeTabs.find(item => item.name == newTabName);
      if (isIndex) {
        newTabName = "未命名" + ++this.tabIndex;
      }
      let option = {};
      _.set(option, "application", this.app);
      _.set(option, "title", newTabName);
      // _.set(option, "id", this.tabIndex);
      _.set(option, "id", generateId());
      _.set(option, "name", newTabName);
      _.set(option, "state", "new");
      _.set(option, "appData", new AppData());
      // this.$store("siddhi/ADD_TAB", option);
      this.app.workspaceManager.createNewTab(option);
      this.closeBtnShow = true;
    },
    // code编辑器确认 同步更新 节点
    codeSubmit(targetName) {
      this.removeTab(targetName);
      this.openTab_File(targetName);
    },
    removeTab(targetName) {
      console.log("object :>> ", targetName);
      this.app.workspaceManager.closeTab({ name: targetName });
      if (this.tabsList.length == 0) {
        this.closeBtnShow = false;
      }
    },
    changeTab(currntTab, e) {
      ///切换页签
      const actTab = this.tabsList.find(tab => tab.name == currntTab.name);
      if (actTab) {
        store.dispatch("siddhi/setActiveTab", actTab);
        this.editableTabsValue = actTab.name;
      }
    },
    delTabs(targetName) {
      //---------------这是子组件想要关闭当前tab页的，控制父组件的操作
      let tabs = this.ediEdgeTabs;
      let activeName;
      tabs.forEach((tab, index) => {
        if (tab.title === targetName) {
          //因为判断不一样
          let nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
          }
        }
      });
      this.editableTabsValue = activeName;
      //this.ediEdgeTabs = tabs.filter(tab => tab.title !== targetName);
    },
    switchToView(flag) {
      let tabs = this.ediEdgeTabs;
      let activeName = this.editableTabsValue;
      tabs.forEach((tab, index) => {
        if (tab.title === activeName) {
          if (flag) {
            this.objectJson = this.editorContent;
            tab.content = codeEditor;
          } else {
            this.objectJson = this.mxgraphContent;
            tab.content = graph;
          }
        }
      });
      //this.editableTabsValue = activeName;
    },

    async save() {
      return new Promise(async (resolve, reject) => {
        let that = this;
        // if (JSON.stringify(this.activeTab) == "{}") {
        //   this.$msg("当前没有可保存的siddhi");
        //   return;
        // }
        console.log("this.activeTab :>> ", this.activeTab);
        const { appData } = this.activeTab;
        if (!appData) {
          this.$msg("当前没有可保存的siddhi");
          return;
        }
        const appDataKey = constants.key;
        const queryKey = constants.queryKey;
        // 判断节点是否没有编辑或者没有拖拽的节点
        const isLenght = appDataKey.every(key => {
          return appData[key].length == 0;
        });
        const isQueryLenght = queryKey.every(key => {
          return appData.queryLists[key].length == 0;
        });
        if (isLenght && isQueryLenght) {
          this.$msg("当前节点信息有误,请补全节点信息");
          return;
        }
        if (that.activeTab.name == "") {
          this.$msg("当前没有可保存的siddhi");
          return;
        }
        const validata = this.$store.getters["siddhi/validateIsDel"];
        const { state } = this.activeTab;
        if (validata.length !== 0) {
          // return;
          const msg = validata.map(
            m => m.name || m.title || m.queryName || m.type
          );
          this.$msg(`请完善${msg.join(",")}节点信息`);
          return;
        }

        // 如果是新建的 打开设置弹框
        if (state == "new") {
          that.openSetting();
        } else {
          // that.writeSiddhi(currentfileName);
          await this.$store.dispatch("siddhi/writeSiddhi").then(res => {});
          await this.$store.dispatch("siddhi/loadWorkspaceTree");
          // this.codeSubmit()
          resolve();
        }
      });

      //获取到每个节点组装成功的数据拼成最终的格式
      //let returnConfigData=base64EncodeUnicode(JSON.stringify(this.configurationData))
      //调用code-view
      // if (that.activeTab.isDirty == false) {
      //   alert("无效操作");
      //   return;
      // }
      // let currentfileName = that.activeTab.name;
      // let tempFileName = base64EncodeUnicode(
      //   currentfileName + that.siddhiSuffixes
      // );
      // let param = "configName=" + tempFileName;
      // let exists = await that.existFileInPath(param);
      // exists true说明在列表已存在
      // if (exists) {
      // } else {
      // }
      return;
      if (that.activeTab.state == "new") {
        if (exists) {
          this.$confirm(
            "工作空间中已经存在名称为:" +
              currentfileName +
              "的文件，请确认是否替换?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(() => {
              if (that.saveResultJson == "") {
                that.app.defaultResponse.siddhiAppConfig.siddhiAppName =
                  that.activeTab.name;
                that.saveResultJson = base64EncodeUnicode(
                  JSON.stringify(that.app.defaultResponse)
                );
              }
              that.writeSiddhi(currentfileName);
            })
            .catch(() => {
              this.$msg({
                type: "info",
                message: "已取消替换,请重新命名,保存后即创建新文件"
              });
              that.openSetting();
            });
        } else {
          if (that.saveResultJson == "") {
            that.app.defaultResponse.siddhiAppConfig.siddhiAppName =
              that.activeTab.name;
            that.app.defaultResponse.siddhiAppConfig.siddhiAppDescription =
              that.activeTab.description;

            that.saveResultJson = base64EncodeUnicode(
              JSON.stringify(that.app.defaultResponse)
            );
          }
          that.writeSiddhi(currentfileName);
        }
      } else if (that.activeTab.state == "old") {
        if (exists) {
          if (that.openFileName == "") {
            //非workspace入口打开的场景
            if (that.saveResultJson != "") {
              that.writeSiddhi(currentfileName);
            }
          } else {
            if (
              that.saveResultJson == "" &&
              that.openFileName != currentfileName
            ) {
              //改名后与其他已经存在的文件重名
              this.$msg({ type: "info", message: "已存在,请重新命名!" });
              that.openSetting();
            } else if (
              that.saveResultJson != "" &&
              that.openFileName != currentfileName
            ) {
              //改名后与其他已经存在的文件重名
              this.$msg({ type: "info", message: "已存在,请重新命名!" });
              that.openSetting();
            } else if (
              that.saveResultJson == "" &&
              that.openFileName == currentfileName
            ) {
              that.saveResultJson = that.activeTab.siddhiJson;
              that.writeSiddhi(currentfileName);
            } else if (
              that.saveResultJson != "" &&
              that.openFileName == currentfileName
            ) {
              that.writeSiddhi(currentfileName);
            } else {
              //其他非法操作
            }
          }
        } else {
          if (that.saveResultJson == "") {
            that.saveResultJson = that.activeTab.siddhiJson;
          }
          that.writeSiddhi(currentfileName);
        }
      } else {
        //非法操作下不做处理
      }
    },
    async existFileInPath(param) {
      return new Promise(async (resolve, reject) => {
        await edgeExistFile(param)
          .then(res => {
            if (res.data) {
              resolve(res.data.exists);
            }
          })
          .catch(Error => {
            console.log(Error);
          });
      });
    },
    async writeSiddhi(currentfileName) {
      this.$store.dispatch("siddhi/writeSiddhi").then(res => {
        if (res) {
          // this.$emit("closeSetting");
        }
      });
      return;
      let that = this;
      await edgeGetCode(this.activeTab.siddhiJson)
        .then(res => {
          //根据json格式 获取到code的加密内容 然后写入siddhi
          var codeBase64 = res.data; //
          //var dd=base64DecodeUnicode(res.data);//解码
          var fileNameBase64 = base64EncodeUnicode(
            currentfileName + that.siddhiSuffixes
          );
          var workspace64 = base64EncodeUnicode("workspace");
          var param =
            "location=" +
            workspace64 +
            "&configName=" +
            fileNameBase64 +
            "&config=" +
            codeBase64;
          //调用写入接口
          edgeWrite(param)
            .then(res => {
              // that.$message({
              //   type: "success",
              //   message: "保存成功!",
              // });
              store.dispatch("siddhi/setLogData", {
                message: "【" + currentfileName + "】保存成功!",
                type: "INFO"
              });
              store.dispatch("siddhi/setConsoleState", true);
              if (this.asideLeftShow == true) {
                // that.app.workspaceManager.loadWorkspaceTree();
                this.$store.dispatch("siddhi/loadWorkspaceTree");
              }
            })
            .catch(Error => {
              //console.log(Error.response.data);//抓取控制台日志
              if (Error.response != undefined) {
                store.dispatch("siddhi/setLogData", {
                  message:
                    "【" +
                    currentfileName +
                    "】保存失败!" +
                    Error.response.data,
                  type: "ERROR"
                });
                store.dispatch("siddhi/setConsoleState", true);
              }
            });
        })
        .catch(Error => {
          that.$message({ type: "success", message: "有错误的数据!" });
          console.log(Error);
        });
      //更新页签状态
      // that.activeTab.state = "old";
      this.$store.commit("siddhi/SET_ACTIVE_TAB", {
        ...this.activeTab,
        state: "old"
      });
      // that.activeTab.siddhiJson = that.objectJson;
    },
    closedialog() {
      this.saveDialog = false;
    },
    // 删除节点
    deleteSiddi(fileName) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.message = "正在检查模拟依赖项，请稍候...";
            const feed = await getFeed();
            const { message, status } = feed.data;
            if (status == "OK") {
              const { activeSimulations, inActiveSimulations } = JSON.parse(
                message
              );
              console.log(activeSimulations, "activeSimulations");
            }
            console.log(feed, "feedfeedfeedfeedfeed");
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        }
      }).then(() => {
        // deleteSiddi({ siddhiAppName: fileName + ".siddhi" }).then((res) => {
        //   // this.app.workspaceManager.loadWorkspaceTree();
        //   this.$store.dispatch("siddhi/loadWorkspaceTree");
        //   this.removeTab(fileName);
        // });
      });
    },
    // 打开节点
    openTab_File(fileName) {
      this.closeBtnShow = true;
      //工作空间打开文件
      // let fileAlreadyOpened = false; //文件是否已经打开
      // let openedTab; //打开的页签
      // let flag = false;
      this.openFileName = fileName;
      // let tabList = this.app.tabController.getTabList(); //this.ediEdgeTabs;
      const tabObj = this.ediEdgeTabs.find(item => {
        return item.title == fileName;
      });
      console.log(tabObj, "打开的节点", this.ediEdgeTabs);
      if (tabObj) {
        this.app.tabController.setActiveTab(tabObj);
      } else {
        this.app.workspaceExplorer.openFile(
          "workspace/" + fileName + ".siddhi"
        ); //workspace\xxxx1.siddhi
      }
      // this.ediEdgeTabs.forEach((tab, index) => {
      //   if (tab.title === fileName) {
      //     fileAlreadyOpened = true;
      //     openedTab = tab;
      //   }
      // });

      // if (fileAlreadyOpened) {
      //   this.app.tabController.setActiveTab(openedTab);
      // } else {
      // }
    },
    returnSource(returnAppConfig2) {
      let returnAppConfig = _.cloneDeep(returnAppConfig2);
      //视图上节点名称
      this.mxTitle = returnAppConfig.nodeData.name || returnAppConfig.name;
      // if (returnAppConfig.nodeData.ReturnType == "windowList") {
      //   returnAppConfig.nodeData.parameters =
      //     returnAppConfig.nodeData.parameters2;
      // }
      returnAppConfig.nodeData.id = returnAppConfig.nodeData.id
        ? returnAppConfig.nodeData.id
        : this.nodeId;

      this.display = returnAppConfig.display;
      // 取消红框
      returnAppConfig.nodeData.isDel = false;

      // 更新vuex
      // console.log(returnAppConfig,this.nodeDataRight.relateCellData)
      this.$store.commit("siddhi/SET_ACTIVE_TAB_DARA", {
        returnAppConfig,
        relateCellData: this.nodeDataRight.relateCellData
      });
      return;
    },
    useAppData(data, returnAppConfig) {
      let newData = _.cloneDeep(data);
      let newReturnAppConfig = _.cloneDeep(returnAppConfig);
      const isNodeIndex = newData.findIndex(item => {
        return item.id == newReturnAppConfig.nodeData.id;
      });
      if (isNodeIndex === -1) {
        newData.push(newReturnAppConfig.nodeData);
      } else {
        newData[isNodeIndex] = newReturnAppConfig.nodeData;
      }
      return newData;
    },
    reloadAppData(appObj) {
      // appObj.streamList[0].name = "2333";
      this.appData.setSiddhiAppName(this.activeTab.name);
      this.appData.setAppAnnotationList(appObj.appAnnotationList);
      this.appData.setAppAnnotationObjectList(appObj.appAnnotationListObjects);
      this.appData.setSourceList(appObj.sourceList);
      this.appData.setSinkList(appObj.sinkList);
      this.appData.setStreamList(appObj.streamList);
      this.appData.setTableList(appObj.tableList);
      this.appData.setTriggerList(appObj.triggerList);
      this.appData.setWindowList(appObj.windowList);
      this.appData.setAggregationList(appObj.aggregationList);
      this.appData.setFunctionList(appObj.functionList);
      this.appData.setWindowFilterProjectionQueryList(
        appObj.queryLists.WINDOW_FILTER_PROJECTION
      );
      this.appData.setSequenceQueryList(appObj.queryLists.SEQUENCE);
      this.appData.setJoinQueryList(appObj.queryLists.JOIN);
      this.appData.setPatternQueryList(appObj.queryLists.PATTERN);
      this.appData.setPartitionList(appObj.partitionList);
    },
    openSetting() {
      this.configTiltle = "设置";
      this.display = true;
      this.nodeType = "0";
      this.nodeDataRight.objectMxl = this.activeTab.mxJson;
    },
    closeSetting() {
      this.display = false;
    },
    setCurrentName(arr, key, name) {
      arr.forEach(item => {
        item[key] = name;
      });
    },
    runApp() {
      if (
        (this.activeTab &&
          this.activeTab.name &&
          this.activeTab.isPlay === null) ||
        this.activeTab.isPlay === false
      ) {
        this.$store.commit("siddhi/SET_ACTIVE_TAB", {
          ...this.activeTab,
          isPlay: true
        });
        // this.activeTab.isPlay = true;
        let appName = this.activeTab.name;
        let data = { siddhiAppName: appName, variables: {} };
        this.app.workspaceManager.runWorkspaceAPP(data);
      }
    },
    stopApp() {
      if (
        this.activeTab &&
        this.activeTab.name &&
        this.activeTab.isPlay === true
      ) {
        let appName = this.activeTab.name;
        // this.activeTab.isPlay = false;
        this.$store.commit("siddhi/SET_ACTIVE_TAB", {
          ...this.activeTab,
          isPlay: false
        });
        this.app.workspaceManager.stopWorkspaceAPP(appName);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.tab_lab {
  position: relative;
  padding-right: 10px;
  .dot {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;
    width: 6px;

    height: 6px;
    background-color: #909399;
    border-radius: 50%;
  }
}
.my_manin {
  overflow: hidden;
}
.main_card {
  // height: calc(100vh - 145px) !important;
  height: 100% !important;
}
.output-console-content /deep/ pre {
  white-space: pre-wrap;
}
.output-console-content .INFO {
  color: #03a9f4;
  white-space: pre-wrap;
}

.output-console-content .INFO-LOGGER {
  color: #666;
  white-space: pre-wrap;
}

.output-console-content .ERROR {
  color: #f44336;
  white-space: pre-wrap;
}

.topContainer {
  position: relative;
  .head_box {
  }
}
.topContainer /deep/ .infinite-list-item {
  padding: 0 10px;
}
.my_as /deep/ .el-tabs__nav-wrap {
  padding: 0 10px;
}
.topContainer /deep/ .el-tabs__nav-wrap {
  width: calc(100% - 10px);
}
.my_as {
  position: relative;
}
.head_box /deep/ .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: inline-block !important;
}
.head_box {
  /* height: 43px; */
  /* background-color: red; */
  /* margin-top: -50px; */
  position: absolute;
  right: 0;

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.head_box /deep/ .el-submenu__title::after {
  content: "|";
  margin-left: 10px;
  margin-right: 6px;
}
.head_box .icon_box {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.icon_box .operation_icon {
  width: 18px;
  height: 18px;
}
.head_box .icon_box img {
  margin: 0 10px;
  cursor: pointer;
}

.CAllTab {
  border: none;
  width: 75px;
  height: 28px;
  opacity: 1;
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 99;
}
.el-aside {
  background-color: #fff;
  margin-right: 15px;
}
.topContainer /deep/.el-header {
  height: 0;
}
.divider {
  margin: 8px 0 4px 0;
  color: rgba(228, 228, 228, 1);
}
.menu {
  width: 28px;
  height: 19px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #999999;
  margin-left: 11px;
  margin-bottom: 5px;
}
.topMenu {
  position: absolute;
  right: 313px;
  top: -41px;
  height: auto !important;
}

.mainContainer {
  /* margin: -70px -11px -10px -11px; */
  /* margin-right: 0; */
}
.topContainer /deep/.el-container is-vertical {
  height: 34px;
}
.el-submenu {
  /* width: 80px; */
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.topContainer /deep/.el-submenu .el-submenu__title {
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  padding: 0;
}
.topContainer /deep/.el-menu--horizontal {
  background-color: #f3f4f9;
  /* margin-top: 1px; */
  height: 100%;
  display: flex;
}
.close-icon {
  font-size: 12px;
  position: absolute;
  right: 10px;
  top: 16px;
}
.close-icon:hover {
  cursor: pointer;
}

.el-menu.el-menu--horizontal.el-menu {
  /* top: -50px; */
  /* height: 50px; */
  border: 0;
}

.el-menu-item:hover {
  background-color: rgba(193, 210, 224, 0.548) !important;
}
.el-submenu__title:hover {
  background-color: #183016 !important;
}
.topContainer /deep/.el-submenu:hover .el-submenu__title {
  background-color: #f3f4f9;
}
.operationIcon {
  margin-right: 5px;
  color: #666666;
}
.menuSwitch {
  position: absolute;
  top: -35px;
  right: 0px;
}
.topContainer /deep/ .el-dialog__header {
  /* background-color: #409eff; */
}
.dialog-title {
  color: #ffffff;
}
.topContainer /deep/ .el-icon-close:before {
  /* color: #666666; */
}
.el-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  /* > .el-dialog__body {
      overflow: auto;
    } */
}

.topContainer /deep/ .el-tabs--card > .el-tabs__header {
  border-bottom: 1px solid #e4e7ed;
}
.el-aside /deep/ .el-tabs__item {
  padding: 0 10px;
  /* margin-left: 2px; */
}
.el-main /deep/ .el-tabs__item {
  padding-left: 5px;
}
.el-main /deep/ .el-tabs__nav-scroll {
  margin-left: 0px;
  margin-right: 8px;
}
.el-aside /deep/.el-tabs__nav {
  /* position: static; */
  /* padding-left: 10px; */
}
.el-main {
  background-color: #fff;
}
.el-main /deep/.el-tabs__header.is-top {
  /* margin-right: 112px; */
  margin-left: 18px;
  margin-bottom: 0;
  width: 100%;
}
.el-main /deep/ .el-card__body {
  padding: 0px 0px 0px 0px;
}
</style>
